<template>
  <div v-show="titleMobile||titleShow">
    <div class="top"></div>
    <div class="back" @click="back">
      <div class="back-round" :style="{'opacity':backroundstyle}"></div>
      <el-icon :size="20">
        <ArrowLeft />
      </el-icon>
    </div>
    <div class="container12" :style="{'opacity':topstyle}">
      <!-- 如果是自定义就不显示标题 -->
      <div v-if="!titleShow" class="title">{{name}}</div>
      <!-- 自定义插槽 -->
      <slot class="solt"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TitleMobile',
  props: {
    // 自定义top 
    titleShow
      : {
      type: Boolean,
      default: false,
    },
    //标题逐渐透明
    gradient: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {
      name: "",
      // 默认不显示，要使用请在router.meta里改为true
      titleMobile: false,
      topstyle: '1',
      backroundstyle: '0',
    }
  },
  mounted () {
    if (this.$route.name != undefined) {
      this.name = this.$route.name;
    }
    if (this.$route.meta.titleMobile != undefined) {
      this.titleMobile = this.$route.meta.titleMobile;
    }
    window.addEventListener('scroll', this.handleScroll);
  },
  //销毁,否则跳到别的路由还是会出现
  unmounted () {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll () {
      if (!this.gradient) return;
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
      //让top背景逐渐变深
      this.topstyle = "" + (1 - (this.scroll / 200));
      this.backroundstyle = "" + (this.scroll / 200);
    },
    back () {
      this.$router.back();
    }
  },
}
</script>

<style scoped>
.container12 {
  position: fixed;
  height: 40px;
  width: 100%;
  background-color: var(--primary);
  text-align: center;
  /* box-shadow: 0px 1px 1px 0px gainsboro; */
  top: 0;
  z-index: 1000;
}
/* 用来顶出内容 因为标题是固定的 */
.top {
  margin-bottom: 40px;
}
.title {
  line-height: 40px;
  letter-spacing: 4px;
  font-weight: bold;
}
.back {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1001;
}
.back-round {
  position: fixed;
  top: 7px;
  left: 7px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid gray;
  z-index: 1001;
  background-color: rgba(128, 128, 128, 0.2);
}
</style>